<template>
  <view class="service-log">
    <view class="head">
      <view class="bd">
        <text class="title">{{ title }}</text>
      </view>
      <view class="ft">
        <view
		class="status"
          :class="{
            status: status == 0,
            wait: status == 1,
            process: status == 2,
            status: status == 3,
          }"
        >
          {{
            status == 0
              ? ""
              : status == 1
              ? "待处理"
              : status == 2
              ? "进行中"
              : status == 3
              ? "已完成"
              : "已关闭"
          }}
        </view>
      </view>
    </view>
    <view class="body">
      <view class="line">
        <view class="line-label">订单编号</view>
        <view class="line-value">{{ no }}</view>
      </view>
      <view class="line">
        <view class="line-label">下单时间</view>
        <view class="line-value">{{ createTime }}</view>
      </view>
      <view class="line">
        <view class="line-label">更新时间</view>
        <view class="line-value">{{ updateTime }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    status: [String, Number],
    title: String,
    no: String,
    createTime: String,
    updateTime: String,
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.service-log {
  position: relative;
  padding: 0 20rpx;
  background: #1A3156;
  border-radius: 10rpx;

  >.head {
    display: flex;
    height: 78rpx;
    align-items: center;
    border-bottom: 1rpx solid #eee;

    >.bd {
      flex: 1;

      >.title {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        color: color-white;
      }
    }

    >.ft {
      display: flex;
      flex: 0 0 auto;
      align-items: center;

      .status {
        min-width: 100rpx;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 14rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        border-radius: 4rpx;
        // background: #F2F3F7;
        color: #999FB1;
      }
	  .wait {
	    // background: #FEF2ED;
	    color: #F19149;
	  }
	  
	  .process {
	    color: #59C157;
	    // background: #EFFFEF;
	  }
    }
  }

  >.body {
    padding: 22rpx 0;

    >.line {
      display: flex;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: color-white;
      line-height: 42rpx;
      margin-bottom: 12rpx;

      &:last-child {
        margin-bottom: 6rpx;
      }

      >.line-label {
        flex: 0 0 4em;
        margin-right: 30rpx;
      }
    }
  }
}
</style>